<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--  引入vue.js-->
    <script src="js/vue.js"></script>
<!--    引入axios.js-->
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="app">
<!--       使用子组件时，需要绑定自定义的属性，接收父组件的数据-->
        <cdm :lidata="lis" @valchange="change">按钮一</cdm>

        <br>
        子组件中的数据: {{childComponentData}}
        <hr>
        <cdm>按钮二</cdm>

        <hr>
        <cdm>按钮三</cdm>

    </div>
</body>

<script>

    //自定义组件(封装一段重复使用的标签，实现结构复用)
    Vue.component("cdm",{
        //自定义子组件的属性，接收组件的数据
        props:["lidata"],
        //表示这个组件封装的是哪一段代码
        //<slot> 槽的作用是占位，如果使用这个组件时，不设定内容，使用槽中的默认内容，如果设置了内容，使用我们自己设置的内容
        template:"<div><button style=\"border: 1px solid red;font-size: 30px;\"><slot>按钮</slot></button>\n" +
            "        <br>\n" +
            "        <ol>\n" +
            "            <li v-for='ld in lidata'>{{ld}}</li>\n" +
            "        </ol>  <br> <input type='text' v-model='val'>" +
            "</div>",
        data(){
            return {
                val:""
            }
        },

        watch:{
            //监听这个属性的变化
            val:function (newVal){
                //子组件监听到内容变化后，需要通过 【事件】的方式，将变化的数据发送给父组件 【自定义事件-valChange】
                this.$emit("valchange",newVal)
            }
        }
    });

    new Vue({
        el:"#app",
        //定义数据模型
        data:{
            lis:["111","222","333"],

            //用来接收子组件的数据
            childComponentData:""
        },
        //定义vue对象的行为
        methods:{
            //用来监听子组件事件的监听器（一旦子组件数据发生变化，会触发这个方法）
            change(val){
                this.childComponentData = val;
            }
        },
        //监听机制，监听指定属性的变化（一旦属性发生值的改变，我们实现写好的监听回调方法会执行）
        watch:{

        },
        //计算属性：本质还是一个属性，只不过这个属性的值需要通过业务运算获取，而且我们只需要运算一次
        computed:{

        },

        //Vue对象创建完成，但是和页面元素没有任何关系的阶段
        created(){
        },

        //Vueu对象中的数据和页面元素完成绑定完成后的阶段
        mounted(){
        }
    });

</script>

</html>